<template>
  <div class="login">
    <van-nav-bar title="登录" />
    <van-cell-group>
      <van-field label="手机号" required v-model="mobile" :error-message='mobile_err' placeholder="请输入手机号" />
    </van-cell-group>
    <van-cell-group>
      <van-field label="验证码" required v-model="code" :error-message='code_err' placeholder="请输入验证码" />
    </van-cell-group>
    <div class="btn">
      <van-button class="login-btn" type="info" @click="login">登录</van-button>
    </div>
  </div>
</template>

<script>
import { UersLogin } from '@/api'
export default {
  name: 'login-page',
  data () {
    return {
      mobile: '',
      code: '',
      mobile_err: '',
      code_err: ''
    }
  },
  methods: {
    check () {
      this.mobile_err = this.mobile === '' ? '手机号不能为空' : ''
      this.code_err = this.code === '' ? '验证码不能为空' : ''
      if (this.mobile === '') {
        return false
      }
      if (this.code === '') {
        return false
      }
      return true
    },
    async login () {
      if (!this.check()) {
        return
      }
      this.$toast.loading({
        message: '正在登录',
        forbidClick: true,
        duration: 0
      })
      try {
        console.log(this.mobile, this.code)
        const result = await UersLogin(this.mobile, this.code)
        console.log(result)
        this.$toast.success('登陆成功')
        this.$store.commit('setTokenINfo', result.data.data)
      } catch (error) {
        console.log(error)
        this.$toast.error('登陆失败')
      }
    }
  }
}
</script>

<style lang='less' scoped>
.login {
  .btn {
    padding: 30px;
    .login-btn {
      width: 100%;
    }
  }
}
</style>
